<template>
  <div class="public_main">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>{{$t('sidebar.operator')}}</el-breadcrumb-item>
        <el-breadcrumb-item>{{$t('auditManage.no1')}}</el-breadcrumb-item>
        <el-breadcrumb-item>{{$t('auditManage.no2')}}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

		<search 
			:searchData="searchData" 
			@search="search" 
			@putExcel="putExcel" 
			:searchRight="true"
			:outputRight="false"
    ></search>
    <!-- -------------表单显示栏------------------------ -->
    <div class="table" v-if="true">
      <template>
        <el-table :data="tableData" size="small" stripe v-loading="loadFlag">
          <el-table-column align="center" prop="orderId" :label="$t('public.orderId')" >
          </el-table-column>
          <el-table-column align="center" prop="repaymentNo" :label="$t('public.no83')" >
          </el-table-column>
          <el-table-column align="center" prop="loanAmount" :label="$t('public.no30')" >
            <template slot-scope="scope">
              <span>{{$store.state.common.id_currency}}
                {{$store.getters.moneySplit(scope.row.loanAmount)}}
                {{$store.state.common.vi_currency}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="returnMoney" :label="$t('public.no27')" >
            <template slot-scope="scope">
              <span>{{$store.state.common.id_currency}}
                {{$store.getters.moneySplit(scope.row.returnMoney)}}
                {{$store.state.common.vi_currency}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="refundAmount" :label="$t('public.no57')" >
            <template slot-scope="scope">
              <span>{{$store.state.common.id_currency}}
                {{$store.getters.moneySplit(scope.row.refundAmount)}}
                {{$store.state.common.vi_currency}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="refundTime" :label="$t('public.no60')" width="86">
          </el-table-column>
          <el-table-column align="center" prop="thirdChannel" :label="$t('auditManage.no8')" >
          </el-table-column>
          <el-table-column align="center" prop="name" :label="$t('auditManage.no9')" >
          </el-table-column>
          <el-table-column align="center" prop="applicationTime" :label="$t('public.submitDate')" width="86">
          </el-table-column>
          <el-table-column align="center" prop="applicationResult" :label="$t('auditManage.no10')" >
            <template slot-scope="scope">
              <span>{{$t($store.getters.applicationResult_status(scope.row.applicationResult))}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="status" :label="$t('auditManage.no3')" >
            <template slot-scope="scope">
              <span>{{$t($store.getters.applicationResult_status(scope.row.status))}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="reviewTime" :label="$t('new.no9')" width="86">
          </el-table-column>
          <el-table-column fixed="right" align="center" prop="operation" :label="$t('public.operation')" min-width="180">
            <template slot-scope="scope" >
              <span 
                v-if="$store.state.common.permiss.flataccount.includes('audit')&&scope.row.isNotReview==1"
                class="table_opr" 
                @click="showAudit(scope.row)">
                {{$t('public.no76')}}
              </span>
              <span 
                v-if="$store.state.common.permiss.flataccount.includes('view')&&scope.row.isReview==1" 
                class="table_opr"  
                @click="showDetail(scope.row.orderId)">
                {{$t('public.no29')}}
              </span>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>

    <!-- ------------  分页显示栏  ------------------------ -->
    <el-row type="flex" justify="end">
      <div class="pages">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          layout="total, prev, pager, next, ->"
          :total="pageTotal?pageTotal:0">
        </el-pagination>
      </div>
    </el-row>

    <!-- 查看详细弹窗 -->
    <el-dialog :title="$t('public.no29')" :visible.sync="detailFlag" width="1100px">
      <el-table :data="detailTableData" size="small">
				<el-table-column align="center" prop="id" :label="$t('auditManage.no17')" >
				</el-table-column>
				<el-table-column align="center" prop="repaymentId" :label="$t('public.backMoneyId')" >
          <template slot-scope="scope">
            <span>{{scope.row.repaymentId==0?'-':scope.row.repaymentId}}</span>
          </template>
				</el-table-column>
				<el-table-column align="center" prop="orderId" :label="$t('public.orderId')" >
        </el-table-column>
				<el-table-column align="center" prop="repaymentNo" :label="$t('public.no83')" >
				</el-table-column>
				<el-table-column align="center" prop="refundAmount" :label="$t('public.no65')" >
          <template slot-scope="scope">
            <span>{{$store.state.common.id_currency}}
              {{$store.getters.moneySplit(scope.row.refundAmount)}}
              {{$store.state.common.vi_currency}}</span>
          </template>
				</el-table-column>
				<el-table-column align="center" prop="thirdChannel" :label="$t('loanAfterManage.payType')" >
				</el-table-column>
				<el-table-column align="center" prop="refundTime" :label="$t('public.no60')">
        </el-table-column>
				<el-table-column align="center" prop="repaymentStatus" :label="$t('add.no52')" width="100">
          <template slot-scope="scope">
            <span>{{$t($store.getters.applicationResult_status(scope.row.repaymentStatus))}}</span>
          </template>
				</el-table-column>
				<el-table-column align="center" prop="status" :label="$t('auditManage.no3')" >
          <template slot-scope="scope">
            <span>{{$t($store.getters.applicationResult_status(scope.row.status))}}</span>
          </template>
				</el-table-column>
				<el-table-column align="center" prop="reviewTime" :label="$t('new.no9')">
				</el-table-column>
        <el-table-column align="center" prop="name" :label="$t('auditManage.no4')">
				</el-table-column>
        <el-table-column align="center" prop="remark" :label="$t('public.no37')">
				</el-table-column>
			</el-table>
			<el-row type="flex" justify="end">
				<div class="pages" >
					<el-pagination
						@current-change="handleCurrentChange2"
						:current-page="currentPage2"
						layout=" prev, pager, next, total,->"
						:total="pageTotal2?pageTotal2:0">
					</el-pagination>
				</div>
			</el-row>
    </el-dialog>

    <!-- 平账审核弹窗 -->
    <el-dialog :title="$t('public.no76')" :visible.sync="PingZangFlag" width="1100px">
      <p class="title" style="margin-top:-20px;">{{$t('operationDetail.tab1.no2')}}</p>
      <p class="line"></p>
      <div class="oneLineHasThree">
				<p><span>{{$t('public.orderId')}}:</span>
					<span>{{AuditDetail.id}}</span>
				</p>
				<p><span>{{$t('public.userName')}}:</span>
					<span>{{AuditDetail.userName | dataIsTrue}}</span>
				</p>
			</div>
      <div class="oneLineHasThree">
				<p><span>{{$t('public.no30')}}:</span>
					<span>{{AuditDetail.loanAmount | dataIsTrue}}</span>
				</p>
				<p><span>{{$t('public.no27')}}:</span>
					<span>{{AuditDetail.returnMoney | dataIsTrue}}</span>
				</p>
				<p><span>{{$t('public.no59')}}:</span>
					<span>{{AuditDetail.mustRefundTime | dataIsTrue}}</span>
				</p>
			</div>
			<p class="title">{{$t('auditManage.no12')}}</p>
      <p class="line"></p>
			<el-table ref="singleTable" :data="PingZangTableData" size="small" stripe highlight-current-row
          @current-change="tableRowChange">
				<el-table-column align="right" label="" width="60">
					<template slot-scope="scope">
						<template>
							<el-radio v-model="radioVal"
								:label="scope.row.id"
								>&nbsp;
							</el-radio>
						</template>
					</template>
				</el-table-column>
				<el-table-column align="center" prop="repaymentId" :label="$t('public.backMoneyId')" >
          <template slot-scope="scope">
            <span>{{scope.row.repaymentId==0?'-':scope.row.repaymentId}}</span>
          </template>
				</el-table-column>
				<el-table-column align="center" prop="refundAmount" :label="$t('public.no57')" >
          <template slot-scope="scope">
            <span>{{$store.state.common.id_currency}}
              {{$store.getters.moneySplit(scope.row.refundAmount)}}
              {{$store.state.common.vi_currency}}</span>
          </template>
				</el-table-column>
				<el-table-column align="center" prop="refundTime" :label="$t('public.backMoneyDate')" >
				</el-table-column>
				<el-table-column align="center" prop="repaymentNo" :label="$t('public.no83')" >
				</el-table-column>
				<el-table-column align="center" prop="thirdChannel" :label="$t('auditManage.no8')" >
				</el-table-column>
				<el-table-column align="center" prop="remark" :label="$t('public.no37')" >
				</el-table-column>
        <el-table-column align="center" prop="name" :label="$t('auditManage.no4')" width="86">
				</el-table-column>
				<el-table-column align="center" prop="createTime" :label="$t('public.submitDate')" width="86">
				</el-table-column>
				<el-table-column align="center" prop="applicationResult" :label="$t('auditManage.no10')" >
          <template slot-scope="scope">
            <span>{{$t($store.getters.applicationResult_status(scope.row.applicationResult))}}</span>
          </template>
				</el-table-column>
			</el-table>
			<el-row type="flex" justify="end">
				<div class="pages">
					<el-pagination
						@current-change="handleCurrentChange1"
						:current-page="currentPage1"
						layout="prev, pager, next, total,->"
						:total="pageTotal1?pageTotal1:0">
					</el-pagination>
				</div>
			</el-row>
			<p class="title">{{$t('auditManage.no11')}}</p>
      <p class="line"></p>
			<div class="oneLineHasThree">
				<p><span>{{$t('public.no57')}}:</span>
					<span>{{tableSelect.refundAmount | dataIsTrue}}</span>
				</p>
				<p><span>{{$t('public.backMoneyDate')}}:</span>
					<span>{{tableSelect.refundTime | dataIsTrue}}</span>
				</p>
			</div>
      <div class="oneLineHasThree">
				<p><span>{{$t('public.no83')}}:</span>
					<span>{{tableSelect.repaymentNo | dataIsTrue}}</span>
				</p>
				<p><span>{{$t('auditManage.no8')}}:</span>
					<span>{{tableSelect.thirdChannel | dataIsTrue}}</span>
				</p>
				<p><span style="color:crimson">{{$t('auditManage.no10')}}:</span>
					<span style="color:crimson">{{$t($store.getters.applicationResult_status(tableSelect.applicationResult))}}</span>
				</p>
			</div>
			<el-form :model="PingZhangform" :rules="rules" ref="ruleForm" label-position="left" label-width="120px" size="small">
				<el-form-item :label="$t('yn.no10')" prop="amount">
          <el-select v-model="PingZhangform.status" :placeholder="$t('public.placeholder')">
            <el-option :label="$t(item.label)" :value="item.value" v-for="(item, i) in options5 " :key="i"></el-option>
          </el-select>
        </el-form-item>
				<el-form-item :label="$t('serviceManage.requestDes')" prop="remark">
          <el-input type="textarea" v-model="PingZhangform.remark" :rows="4" maxlength="600"></el-input>
        </el-form-item>
			</el-form>
      <div class="flex flex-center">
        <el-button class="mg50" type="primary" @click="AuditSubmit('ruleForm')">{{$t('public.no49')}}</el-button>
        <el-button class="mg50" type="primary" @click="AuditClose"> {{$t('public.no50')}} </el-button>
      </div>
    </el-dialog>

    <div class="foot"></div>

  </div>
</template>
<script>
import putExcel from 'src/mixins/putExcel.js';//导出excel
export default {
  name: 'PingZhangAuditList',
  mixins:[putExcel],
  data () {
    return {
      sessionid: '',
      loadFlag: true,
      pageTotal: 0, // 分页总数
      pageTotal1: 0, // 分页总数
      pageTotal2: 0, // 分页总数
			searchTime1: [], // 查询时间
      searchData:[],
      formInline: { // 用户查询信息数据对应字段
        orderId: '',
        name: '',
        transId: '',
        applyTimeBegin: '',
        applyTimeEnd: '',
        status: ''
      },
      currentPage: 1, // 当前页下标
      currentPage1: 1, // 当前页下标
      currentPage2: 1, // 当前页下标
      tableData: [], // 主表格数据
      PingZangTableData: [], 
      detailTableData: [], 
      detailFlag: false, // 详情弹窗
      PingZangFlag: false, // 重新放款弹窗
      orderNo: '', // 点击当前行的订单ID
      PingZhangform: {
        status: '',
        remark: '',
      },
      AuditDetail:{},
			tableSelect: {},
      radioVal: '',
      putExcelUrl:'',
      rules: {
        status: [
          { required: true, message: ' ', trigger: 'change' }
        ],
      }
    }
	},
	computed:{
		options5(){
      if(this.tableSelect.isDefault==1){
        return [
          {value: 1, label: 'auditManage.no14'}, // 还款成功
          {value: 101, label: 'userDetail.reject_status.no6'} // 还款失败
        ]
      }else if(this.tableSelect.isDefault==0){
        return [
          {value: 50, label: 'userDetail.reject_status.no19'}, // 部分还款
          {value: 51, label: 'userDetail.reject_status.no20'}, // 已还款
          {value: 102, label: 'auditManage.no6'}// 未到账
        ]
      }else if(this.tableSelect.isDefault==-1){
        return [
          {value: 103, label: 'auditManage.no16'}// 系统默认
        ]
      }
      
		}
	},
  methods: {
		updateSearchData() {
      this.searchData = [{
        type: 'input',
        label: 'public.orderId',
        attr: 'orderId',
        value: '',
        maxLength: "10",
      }, {
        type: 'input',
        label: 'public.name',
        attr: 'name',
        value: '',
        maxLength: 10,
      },{
        type: 'input',
        label: 'public.no83',
        attr: 'transId',
        value: '',
        maxLength: 10,
      }, {
        type: 'select',
        attr: 'status',
        label: 'auditManage.no3',
        option: this.$store.state.options.pingZhang_auditStatus,
        value: '',
        langFlag: true,
      }, {
        type: 'rangePicker',
        label: 'public.no60',
        attr: 'refundTime',
        value: [],
      }];
    },
    handleCurrentChange (val) { // 分页按钮点击操作
      this.currentPage = val;
      this.getTableData();
    },
    handleCurrentChange1 (val) { // 分页按钮点击操作
      this.currentPage1 = val;
      this.getTableData();
    },
    handleCurrentChange2 (val) { // 分页按钮点击操作
      this.currentPage2 = val;
      this.getTableData();
    },
		search(search) { // 搜索
      this.formInline = {
        orderId: search.orderId,
        name: search.name,
        transId: search.transId,
        status: search.status,
        refundTimeBegin: search.refundTime?search.refundTime[0]:'',
        refundTimeEnd: search.refundTime?search.refundTime[1]:''
      };
      this.currentPage = 1;
      this.getTableData();
    },
		getTableData () { // 列表数据
      let option = {
        pageNum:this.currentPage,
        param: {
          partnerId:sessionStorage.partnerId,
          ...this.formInline
        }       
      }
      this.loadFlag = true;
      this.$axios.post(this.$action.audit_accountList, option).then( res => {
        if(res.code==200){
          this.tableData = res.data.list;
          this.pageTotal = res.data.total;
          this.loadFlag = false;
        }
      })
    },
    getDetailData(orderId,status){
			let option = {
        param: {
          orderId,
          status
        }   
      };
			this.$axios.post(this.$action.audit_accountView, option).then( res => {
				if(res.code==200){
					if(status==2){
						this.detailTableData = res.data.list;
						this.pageTotal2 = res.data.total;
						this.detailFlag = true;
					}
					if(status==1){
						this.PingZangTableData = res.data.list;
            this.pageTotal1 = res.data.total;
            this.PingZangFlag = true;
            setTimeout(()=>{
              this.$refs.singleTable.setCurrentRow(this.PingZangTableData[0]);
              this.radioVal = this.PingZangTableData[0].id
            },500)
					}
				} else {
          this.$globalMsg.error(res.message);
        }
      })
		},
    showDetail (orderId) { // 查看详情操作
      this.getDetailData(orderId,2)
    },
    AuditSubmit(formName){
      this.$refs[formName].validate((valid) => {
        if(valid){
          let option = {
            param:{
              id:this.tableSelect.id,
              type:this.tableSelect.type,
              ...this.PingZhangform
            }
          };
          this.$axios.post(this.$action.audit_accountSave, option).then(res => {
            if (res.code == 200) {
              this.$globalMsg.success(this.$t('message.success'));
              this.getTableData();
              this.AuditClose();
            } else {
              this.$globalMsg.error(res.message);
            }
          })
        }
      });
    },
    AuditClose(){
      this.AuditDetail = {};
      this.tableSelect = {};
      this.PingZhangform.status = '';
      this.PingZhangform.remark = '';
      this.PingZangFlag = false;
    },
    showAudit(row){
      this.AuditDetail = row
      this.getDetailData(row.orderId,1);
		},
		tableRowChange (val) {
      this.tableSelect = val;
      this.radioVal = val.id;
		},
		

  },
  watch: {
    PingZangFlag(val){
      if(!val){
        this.AuditClose();
      }
    }
  },
  mounted () {
    this.updateSearchData();
    this.sessionid = sessionStorage.getItem('sessionid');
    this.getTableData();
    
    
  }
}
</script>
<style scoped lang="scss">
  .mg50{
    margin: 0 50px;
  }
  .detail-line{
    margin: 10px 0;
    font-size: 15px;
    color: #333a4d;
    font-weight: bold;
    span{
      margin-right: 50px;
      i{
        font-style: normal;
        color: #585858;
        font-weight: normal;
      }
    }
  }
  .tabs .tabs_main > li{
    padding: 0;
    .oneLineHasTwo{
      margin-bottom: 0;
    }
  }
  .mgt10{
    margin-top: 10px;
  }
  .box{
    width: 100%;
  }
  table{
    margin-bottom: 1em;
    overflow: auto;
    box-sizing: border-box;
    display: table;
    text-shadow: 0px 1px 0px #fff;
    border-collapse: collapse;
    border-spacing: 0;
    color: #292e31;
    font-size: 14px;
    tr:last-child {
        border-bottom: 1px solid #ccc;
    }
    tr {
        display: table-row;
        vertical-align: inherit;
        border-color: inherit;
    }
    th {
        padding: 5px 10px;
        border-bottom: 1px solid #ccc;
        vertical-align: bottom;
        line-height: 1.6;
        text-align: left;
        font-weight: bold;
        display: table-cell;
    }
    tr:nth-child(odd)>td {
        background-color: #f8f8f8;
    }
    td.nowrap {
        word-break: keep-all;
        white-space: nowrap;
    }
    td{
        display: table-cell;
        padding: 10px;
        vertical-align: top;
        line-height: 1.6;
    }
	}
	.title{
		font-size: 16px;
    font-weight: 600;
    margin-bottom: 6px;
  }
  .line{
    width: 200px;
    border-bottom: 1px dashed rgb(173, 173, 173);
        margin-bottom: 8px;
  }
</style>
